前端企业门户网站案例

2022/8/23

前端

经验技巧总结

在进行页面布局时，位置和对齐，是最重要的基础工作
什么时候出现div：–有改变即添加div[1. 已经改变的 2. 将来可能会改变的]
整体布局时，各个对象的位置、对齐方式、间距等设置要注意细节，要通过计算的方式获取相对位置的对应关系
ul 和 li 的使用频率较高，非常适合于规律性显示的页面效果，例如案例中，多次使用到ul 和 li的场景
表格布局一般用 th td，数据布局一般用ul li
实现水平居中、垂直居中的方法
- 水平居中：margin：25px auto；
- 垂直居中：line-height：60px；height：60px
找准层级关系，活学活用div

href=”#” 可以防止网页一直刷新 ###是锚点的效果
用js的时候一定要有name 和 id
var flag = true;
//全局变量只在页面刷新的时候加载一次
onmouseleave()控制鼠标的离开事件
margin: 25px auto [可以自动根据网页分辨率调整只有两个的话就上下25px 左右自动]

什么时候出现div：——有改变即添加div
1.目前已经改变的和别的格式不一样
2.将来有可能会产生不同的地方

整体布局时，各个对象的位置、对齐方式、间距等设置要注意细节，要通过计算的方式获取相互位置的对应关系

ul和li的使用频率较高，非常适用于规律性显示的页面效果

实现水平居中、垂直居中的方法
√ 水平居中：margin: 25px auto;
√ 垂直居中：line-height：60px; height：60px;

div活灵活用在css中不要直接写要一层一层方便后期维护

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css\common.css">
    <script type="text/javascript" src="js\js1.js"></script>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="image\logo.png">
        </div>
        <div class="menu"   onclick="show_menu()" onmouseleave="show_menu1()">
             <div class="menu_title" ><a href="###">内容分类</a></div> 
             <ul id="title">
                <li>现实主义</li>
                <li>抽象主义</li>
             </ul>
        </div>
        <div class="auth">
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="banner">
            <img src="image/welcome.png" class="banner-img">
        </div>
        <div class="img-content">
            <ul>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img-li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>《无名女郎》是俄国画家伊万·尼古拉耶维奇·克拉姆斯柯依于1883年创作的一幅现实主义肖像画，是画布油画，现收藏于莫斯科的特列恰科夫美术博物馆。</p>
                        <div class="img-btn">
                            <div class="price">￥5800元</div>
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img-li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>《无名女郎》是俄国画家伊万·尼古拉耶维奇·克拉姆斯柯依于1883年创作的一幅现实主义肖像画，是画布油画，现收藏于莫斯科的特列恰科夫美术博物馆。</p>
                        <div class="img-btn">
                            <div class="price">￥5800元</div>
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img-li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>《无名女郎》是俄国画家伊万·尼古拉耶维奇·克拉姆斯柯依于1883年创作的一幅现实主义肖像画，是画布油画，现收藏于莫斯科的特列恰科夫美术博物馆。</p>
                        <div class="img-btn">
                            <div class="price">￥5800元</div>
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img-li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>《无名女郎》是俄国画家伊万·尼古拉耶维奇·克拉姆斯柯依于1883年创作的一幅现实主义肖像画，是画布油画，现收藏于莫斯科的特列恰科夫美术博物馆。</p>
                        <div class="img-btn">
                            <div class="price">￥5800元</div>
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img-li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>《无名女郎》是俄国画家伊万·尼古拉耶维奇·克拉姆斯柯依于1883年创作的一幅现实主义肖像画，是画布油画，现收藏于莫斯科的特列恰科夫美术博物馆。</p>
                        <div class="img-btn">
                            <div class="price">￥5800元</div>
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="image/wumingnvlang.jpg" class="img-li">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>《无名女郎》是俄国画家伊万·尼古拉耶维奇·克拉姆斯柯依于1883年创作的一幅现实主义肖像画，是画布油画，现收藏于莫斯科的特列恰科夫美术博物馆。</p>
                        <div class="img-btn">
                            <div class="price">￥5800元</div>
                            <div class="btn">
                                <a href="#" class="cart">
                                    <img src="image/cart.svg">
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            </ul>
        </div>
    <div class="page-nav">
        <ul> <!--  {<a href="#">1</a>}*12  -->
            <li><a href="#">首页</a></li>
            <li><a href="#">上一页</a></li>
            <li><span class="first-page">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">98</a></li>
            <li><a href="#">99</a></li>
            <li><a href="#">下一页</a></li>
            <li><a href="#">尾页</a></li>
        
    </div>
    </div>
    <div class="footer">
        <p>© 2018 - 2022 ★☆ <span>P-luminary @ Asuna </span>☆★</p>
    </div>
</body>
</html>

common.css

*{
    padding: 0px;
    margin: 0px;
}
body {
    font-size: 14px;
  
}

.header{
    margin:25px auto;
    width: 1200px;
}

.header .menu ul{
    display: none;
    list-style: none;
    position: absolute;
    width: 80px;
    opacity: 0.5; /*半透明效果*/
    background-color: white;
}

.header .menu .menu_title{
     border-bottom: 1px solid black;
     padding-bottom: 20px;
     width: 80px;
     text-align: center;
}

a{
    text-decoration: none;
    color: black;
}

.header .menu ul li{
    margin-top: 20px;
    text-align: center;
}
.header .logo{
    float: left;
    position: relative;
}

.header .menu{
    float: left;
    position: relative;
    margin-top:12px;
    margin-left:16px;

}
.header .auth {
    margin-top:12px;
    float: right;

}
.header .auth ul li {
    float: left;
    margin-right: 50px;
    list-style: none
 
 }

.content{
    width: 1200px;
    margin:25px auto;
}

.content .banner .banner-img{
    margin-top: 5px;
}

.content .img-content ul{
     /*把三张图片合适的放在一起，图片+右间距*/
    width: 1260px;
}

.content .img-content  ul li{
    width: 360px;
    float: left;
    margin: 0 60px 60px 0;
    list-style: none; /*去掉小点点*/
    /*设置边框等格式*/
    margin-top: 30px;
    height: 500px;
    /*水平 垂直 模糊距离 阴影尺寸 阴影颜色 外部阴影*/
    box-shadow: 2px 2px 5px 3px #ccc; /*设置阴影*/
    background-color: white;
}

/*设置标题 ">"直接包含子节点范围比空格要小*/
/*空格是所有子孙后代里寻找 范围大 子孙节点*/
.img-content .info h3{
    font-size: 25px;
    color: red;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*段落标记的行间距*/
.img-content>ul>li .info p{
    line-height: 25px;
    margin-bottom: 20px;
}

body{
    background-color: #F5F5F5;
}

.info{
    margin-left: 30px;
    margin-right: 30px;
}

.img-content>ul>li .price{
    color: #FF0000;
    font-size: 20px;
}

.img-content .info .img-btn{
    width: 300px;
}

.img-content .info .img-btn .btn{
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px; /*设置圆角矩形*/
    float: right;
}

.img-content .info .img-btn .cart img{
    width: 25px;
    height: 20px;
    margin-top: 5px;
}

.img-content .info .img-btn .price{
    float: left;
}

.page-nav ul li{
    float: left;
    margin-right: 20px;
    list-style: none; /*去掉li符号标签的点点*/
}

.page-nav{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border: 1px solid black;
    overflow: hidden; /*边框不显示，增加溢出处理[https://blog.csdn.net/qq_41638795/article/details/83304388]*/
}

.page-nav ul{ /*下方的框框*/
    margin: auto;
    overflow: hidden; 
    width: 500px;
}

.first-page{
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px; /*内部间距*/
}

.footer{
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    border-top: 1px solid #ccc;
    overflow: hidden; /*如果有超出就隐藏*/
}

.footer p{
    text-align: center;
    line-height: 50px;
}
.footer p span{
    color: #ff1493;
}

js1.js

var flag = false //全局变量在页面初始化的时候运行一次
function show_menu(){ //获取menu1对象本身存到对象menu1里面
    var title1=document.getElementById("title");
    if(flag){
        title1.style.display="none";
        flag=false;
    }else{
        title1.style.display="block";
        flag=true;
    }
}

function show_menu1(){
    var title1=document.getElementById("title");
        title1.style.display="none";
        flag=false;
}

LOADING...

前端企业门户网站案例

经验技巧总结

index.html

common.css

js1.js